<template>
    <ul>
        <img src="../../../static/img/img_hot.png" alt="">
        <li v-for="hot_proj in hot_proj_list"
            :key="hot_proj.id">
            <div class="img-container">
                <img :src="hot_proj.img" alt="">
            </div>
            <div>
                <p>
                    {{ hot_proj.name }}
                </p>
                <div>
                    <span class="price-color">￥{{ hot_proj.product_list.sell_price[0] }}</span>
                    <del class="light-gray">￥{{ hot_proj.product_list.market_price[0] }}</del>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default{
        data(){
            return {
                hot_proj_list: [],
            }
        },
        created(){
            this.getHotGoodsList();
        },
        methods: {
            getHotGoodsList(){
				this.Server.getHotGoodsList({
					
				}).then(res => {
					this.hot_proj_list = res.data.hot_proj_list;
				})
			},
        }
    }
</script>
<style lang="less" scoped>
    ul{
        img{
            margin-bottom: 20px;
        }
        li{
            margin-bottom: 15px;
            overflow: hidden;
            >div{
                float: left;
                &:last-child{
                    float: right;
                    width: 170px;
                }
                div{
                    overflow: hidden;
                }
            }
            .img-container{
                width: 80px;
                height: 80px;
            }
            p{
                line-height: 26px;
                height: 52px;
                overflow: hidden;
                margin-bottom: 10px;
            }
            .price-color{
                font-size: 16px;
                vertical-align: bottom;
            }
            .light-gray{
                float: right;
                font-size: 12px;
                vertical-align: bottom;
                margin-top: 5px;
            }
        }
    }
</style>

